<template>
    <el-form label-width="80px" :inline="false" size="large">
        <el-form-item label="SKU名称" size="large">
            <el-input v-model="sku_form.skuName" placeholder="请输入SKU名称" clearable />
        </el-form-item>
        <el-form-item label="SKU价格" size="large">
            <el-input v-model="sku_form.price" placeholder="请输入SKU价格" clearable type="number" />
        </el-form-item>
        <el-form-item label="SKU重量" size="large">
            <el-input v-model="sku_form.weight" placeholder="请输入SKU重量" clearable type="number" />
        </el-form-item>
        <el-form-item label="SKU描述" size="large">
            <el-input v-model="sku_form.skuDesc" placeholder="请输入SKU描述" clearable type="textarea" :rows="3" />
        </el-form-item>
        <el-form-item label="SKU平台属性" size="large" class="sku-attr-form-item">
            <el-form label-width="80px" :inline="true" size="large">
                <el-form-item v-for="item in attr_list" :key="item.id" :label="item.attrName" size="large">
                    <el-select v-model="item.attridandvalueid" placeholder="" clearable filterable @change="">
                        <el-option v-for="attr_value_item in item.attrValueList" :key="attr_value_item.id"
                            :label="attr_value_item.valueName"
                            :value="`${item.id}:${attr_value_item.attrId}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

        </el-form-item>
        <el-form-item label="SKU销售属性" size="large" class="sku-attr-form-item">
            <el-form label-width="80px" :inline="false" size="large">
                <el-form-item v-for="item in spu_has_sale_attr" :key="item.id" :label="item.saleAttrName" size="large" >
                    <el-select v-model="item.attridandvalueid" placeholder="" clearable filterable @change="">
                        <el-option v-for="sale_attr_value_item in item.spuSaleAttrValueList"
                            :key="sale_attr_value_item.id" :label="sale_attr_value_item.saleAttrValueName"
                            :value="`${item.id}:${sale_attr_value_item.id}`"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="SKU图片" size="large">
            <el-table :data="spu_image_list" ref="sku_image_table" border>
                <el-table-column type="selection" width="80" align="center"></el-table-column>
                <el-table-column label="图片" align="center">
                    <template #default="scope">
                        <el-image :src="scope.row.imgUrl" style="width: 100px;height: 100px;" />
                    </template>
                </el-table-column>
                <el-table-column label="图片名称" width="240" align="center" prop="imgName"></el-table-column>
                <el-table-column label="操作" width="200" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="handle_set_default(scope.row)" size="small">设置默认</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-form-item>
        <el-form-item size="normal">
            <el-button type="primary" size="large" @click="handle_submit">提交</el-button>
            <el-button type="primary" size="large" @click="handle_cancel">取消</el-button>
        </el-form-item>

    </el-form>

</template>
<script setup lang="ts">
import type { SkuInfoData, SpuData, SpuHasSaleAttr, SpuImage } from '@/api/product/spu/type';
import useCategoryStore from '@/store/modules/category'
import { ref } from 'vue';
import { reqAddSku, reqSpuHasSaleAttr, reqSpuImageList } from '@/api/product/spu';
const categoryStore = useCategoryStore()
let scene = defineModel<number>('scene')
//平台属性
let attr_list = ref<any[]>([])
// 当前SPU图片列表
let spu_image_list = ref<SpuImage[]>([])
// 当前SPU销售属性列表
let spu_has_sale_attr = ref<SpuHasSaleAttr[]>([])
//sku表单
let sku_form = ref<SkuInfoData>({
    category3Id: 0,
    spuId: 0,
    tmId: 0,
    skuName: '',
    price: 0,
    weight: 0,
    skuDesc: '',
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
    skuDefaultImg: '',
})
let sku_image_table = ref<any>()
const get_init_data = async (category1_id: number, category2_id: number, spu_data: SpuData) => {
    sku_form.value.spuId = spu_data.id as number
    sku_form.value.tmId = spu_data.tmId
    sku_form.value.category3Id = spu_data.category3Id as number
    // 获取平台属性
    while (true) {
        try {
            await categoryStore.getAttr_list(category1_id, category2_id, spu_data.category3Id as number)
            attr_list.value = categoryStore.attr_list
            break
        } catch (error) {
            console.error("获取平台属性失败，重试中...", error)
        }
    }

    // 获取SPU图片列表
    while (true) {
        try {
            const res = await reqSpuImageList(spu_data.id as number)
            if (res.code == 200) {
                spu_image_list.value = res.data
                break
            }
        } catch (error) {
            console.error("获取SPU图片列表失败，重试中...", error)
        }
    }

    // 获取SPU销售属性列表
    while (true) {
        try {
            const res = await reqSpuHasSaleAttr(spu_data.id as number)
            if (res.code == 200) {
                spu_has_sale_attr.value = res.data
                break
            }
        } catch (error) {
            console.error("获取SPU销售属性列表失败，重试中...", error)
        }
    }
}
defineExpose({
    get_init_data
})
function handle_cancel() {
    scene.value = 0
}
function handle_set_default(row:SpuImage){
    console.log(sku_image_table.value)
    sku_image_table.value.clearSelection()
    sku_image_table.value.toggleRowSelection(row,true)
    sku_form.value.skuDefaultImg=row.imgUrl
}
async function handle_submit(){
    //整理参数
    //平台属性
    sku_form.value.skuAttrValueList=attr_list.value.reduce((pre:any,cur:any)=>{
        if(cur.attridandvalueid){
            let [attrId,valueId]=cur.attridandvalueid.split(':')
            pre.push({
                attrId,
                valueId
            })
        }
        return pre
    },[])
    //销售属性
    sku_form.value.skuSaleAttrValueList=spu_has_sale_attr.value.reduce((pre:any,cur:any)=>{
        if(cur.attridandvalueid){
            let [saleAttrId,saleAttrValueId]=cur.attridandvalueid.split(':')
            pre.push({
                saleAttrId,
                saleAttrValueId
            })
        }
        return pre
    },[])
    await reqAddSku(sku_form.value)
    scene.value = 0
}
</script>
<style scoped lang="less">
.sku-attr-form-item {
    white-space: normal;

    .sku-attr-select {
        width: 240px;
        margin-right: 18px;
    }
}
</style>
